<template>
	<view>
		<view class="page-box" v-for="(item, index) in cheerList" :key="index">
			<view class="info-head">
				<u-avatar :src="item.reportAvatar" size="70" mode="square"></u-avatar>
				<view class="name-time">
					<view class="name">{{ item.reportName }}</view>
					<view class="info-time">{{ item.time }}</view>
				</view>
			</view>
			<view class="info" @click="dynamicInfo(item.id)">
				<view class="info-text"><rich-text :nodes="item.content"></rich-text></view>
				<view v-if="item.picture1 != null">
					<u-image height="300" width="400" :src="item.picture1" mode="aspectFit"></u-image>
				</view>
			</view>
			<view class="info-bottom">
				<view class="thumb">
					<!-- item.thumbClick判断是否点赞 -->
					<u-icon
						name="thumb-up"
						size="40"
						@click="thumbClick(item, index)"
						:class="{ 'thumb-active': thumbStatus[item.id] }"
					></u-icon>
					<view class="thumbnum">{{ item.thumbNum }}</view>
				</view>

				<u-icon name="chat" size="40" @click="showInput = !showInput"></u-icon>
			</view>
			<view v-if="item.comments.length > 0">
				<view class="comment" v-for="(com, idx) in item.comments" :key="idx">
					<span class="com-name">{{ com.commentatorName }}:</span>
					{{ com.content }}
				</view>
				<!-- <view v-if="item.comments.length > 4" class="more"><u-icon name="arrow-down" size="40" ></u-icon></view> -->
				
			</view>
			
			<!-- <view v-if="showInput == true"> -->
			<view>
				<u-field
					v-model="inputValue[index]"
					label-width="0"
					placeholder="请输入评论"
					:focus="focus"
					class="comment-input"
				>
					<u-button size="mini" slot="right" type="primary" @click="sendComment(item, index)">确定</u-button>
				</u-field>
			</view>
		</view>
	</view>
</template>

<script>
import uIcon from '../../uview-ui/components/u-icon/u-icon.vue';
import uImage from '../../uview-ui/components/u-image/u-image.vue';
import uAvatar from '../../uview-ui/components/u-avatar/u-avatar.vue';
import uField from '../../uview-ui/components/u-field/u-field.vue';
import uButton from '../../uview-ui/components/u-button/u-button.vue';

export default {
	name: 'cheer',
	components: { uIcon, uImage, uAvatar, uField, uButton },
	props: ['cheerList', 'user','jumpDynamicInfo'],
	data() {
		return {
			// user: {},
			showInput: false,
			inputValue: [],
			focus: false,
			thumbStatus: {}
		};
	},
	onLoad() {
		// this.user = JSON.parse(JSON.stringify(this.$store.getters.getStorageUser));
	},
	mounted() {
		console.log('props', this.cheerList);
		for (let i = 0; i < this.cheerList.length; i++) {
			let itemId = this.cheerList[i].id;
			this.thumbStatus[itemId] = false;
		}
	},
	watch: {
		cheerList: {
			handler(val, oldval) {
				// console.log('val',val)
				// console.log('oldval',oldval)
				this.inputValue = [];
				for (let i = 0; i < val.length; i++) {
					this.inputValue.push('');
					this.thumbStatus[val[i].id] = this.thumbStatus[val[i].id] || false;
				}
			},
			deep: true,
			immediate: true
		}
	},
	methods: {
		dynamicInfo(dynamicId) {
			let type = 'cheer';
			// uni.navigateTo({
			// 	url: `../../pages/internship/comment?dynamicId=${dynamicId}&type=${type}`
			// });
			let jumpParam = {
				dynamicId,
				type
			}
			this.$emit('jumpDynamicInfo',jumpParam)
		},
		async sendComment(item, index) {
			console.log('send comment');
			if (this.inputValue[index] == '') return;
			let param = {
				momentId: item.id,
				content: this.inputValue[index],
				fromId: this.user.userId
			};

			let res = await this.$u.api.addCheerComment(param);
			console.log('comment res', res);
			item.comments.push({
				commentatorName: this.user.nickName,
				content: this.inputValue[index]
			});
			item.commentNum++;
			this.inputValue[index] = '';
			// this.showInput = false
		},
		async thumbClick(item, index) {
			console.log('thumb-click', item, this.thumbStatus);
			console.log('user:', this.user);
			let param = {
				momentId: item.id,
				thumbedId: this.user.userId
			};
			let isClick = false;
			console.log('item thumbs all', item.thumbs.length, this.user.userId);
			if (item.thumbs.length > 0) {
				for (let i = 0; i < item.thumbs.length; i++) {
					console.log('item thumbs', item.thumbs[i].thumbedId, this.user.userId);
					if (item.thumbs[i].thumbedId == this.user.userId) {
						isClick = true;
					}
				}
			}
			if (isClick) {
				console.log('thumb-click-have');
				// 以任务id为唯一标识
				this.thumbStatus[item.id] = false;
				for (let i = 0; i < item.thumbs.length; i++) {
					if (item.thumbs[i].thumbedId == this.user.userId) {
						item.thumbs.splice(i, 1);
						item.thumbNum--;
					}
				}
				this.thumbStatus = Object.assign({}, this.thumbStatus);
				let res = await this.$u.api.delCheerMomentThumb(param);
				console.log('res-have', res);
			} else {
				console.log('res-no');
				this.thumbStatus[item.id] = true;
				item.thumbNum++;
				item.thumbs.push({ thumbedId: this.user.userId, thumbedName: this.user.nickName });
				this.thumbStatus = Object.assign({}, this.thumbStatus);
				let res = await this.$u.api.clickCheerMomentThumb(param);
				console.log('res-no', res);
			}
		}
	}
};
</script>

<style lang="scss">
.page-box {
	width: 96vw;
	margin: 2vh 2vw;
	padding: 10rpx;
	background-color: #fff;
	border-radius: 20rpx;

	.info-head {
		// margin: 10rpx;
		// border-bottom: solid 1px #f9eeff;
		display: flex;
		align-items: center;
		.name-time {
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;
			.name {
			}
			.info-time {
				font-size: 0.8em;
			}
		}
	}

	.info {
		// background-color: rgba(255, 253, 254, 0.8);
		.info-text {
			margin: 10rpx 0;
		}
		// border-bottom: solid 1px #f9eeff;
	}

	.info-bottom {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 15rpx 20rpx;
		border-bottom: solid 1px #f9e4ff;
		.thumb {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 10rpx;
		}

		.thumbnum {
			margin: 0 0 0 5rpx;
			font-size: 5rpx;
		}
	}

	.comment {
		// border: solid 1px #007AFF;
		margin: 10rpx 0;
		.com-name {
			color: #295c9d;
			margin: 0 10rpx 0 0;
		}
	}
	.comment-input {
	}
	.more{
		margin: 0 50%;
		// display: flex;
	}
}
.thumb-active {
	color: #007aff;
}
</style>
